<template>
  <div class="attributes">
    <!-- 商品属性 -->

    <el-button type="primary" @click="addFn">添加商品属性</el-button>

    <!-- v-for="item in attribute" :key="item.id" -->

    <el-table :data="attribute" border >

      <el-table-column label="参数名称" :prop="attribute.goods_id" >
        <el-select v-model="attribute.goods_id" placeholder="请选择">
          <el-option label="attribute.goods_id" value="attribute.attribute_id" ></el-option>
        </el-select>

      </el-table-column>
      <el-table-column  label="参数值"  >
        <el-input v-model="form.name" width="80px"></el-input>
      </el-table-column>

      <el-table-column  label="操作"  >
        <el-button type="danger" @click="removeFn">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props:['attribute'],
  data() {
    return {
      form: {
        region: "",
        name: "11",
      },
    };
  },
  methods:{
      //点击添加按钮
      addFn(){
          this.attribute.push({})
      },
      //添加删除按钮
      removeFn(){
        // console.log(index);
          this.attribute.splice(0,1)
      }
  }
};
</script>
 
<style lang = "less" scoped>
.attributes {
  padding: 20px;
    .el-table{
        margin-top: 10px;

        .el-input__inner{
          width: auto;
          height:'';
        }
        }
}
</style>